import {
  Button,
  Dropdown,
  Form,
  Input,
  Tabs,
  Select,
  Space,
  Tag,
  DatePicker,
  Table,
  TableColumnsType,
  Badge,
} from 'antd';
import { useEffect, useRef, useState } from 'react';
import { request } from 'umi';
import TitlePng from '@/assets/report/reportTitle.png';
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import { ActionType, LightFilter, ProColumns, ProFormDatePicker } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { useAccess, Access } from 'umi';
import exportExcel from '@/services/exportExcel';
import moment from 'moment';
import { addThousandSeparator } from '@/utils';
const { Option } = Select;
export default (props: any) => {
  const actionRef = useRef<ActionType>();
  const [activeKey, setActiveKey] = useState<React.Key>('tab1');
  const [month, setmonth] = useState(moment());
  const [form] = Form.useForm(); //搜索表单
  const columns: TableColumnsType<never> | undefined = [];
  const [datasource, setdatasource] = useState([]);

  const [typevalueEnum, settypevalueEnumEnum] = useState({});
  const gettypevalueEnumEnum = () => {
    request('/sys/dict/getDictListByType', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {
        type: 'operation_type',
      },
    }).then((res) => {
      const obj = {};

      let typevalue = [
        {
          value: '',
          label: '全部',
        },
      ];
      const restypevalue = res?.data;
      typevalue = typevalue.concat(restypevalue);
      typevalue.map((e: any, i: number) => {
        obj[e.value] = {
          text: e.label,
        };
      });
      settypevalueEnumEnum(obj);
    });
    //
  };

  const [logstypevalueEnum, setlogstypevalueEnumEnum] = useState({});
  const getlogstypevalueEnumEnum = () => {
    request('/sys/dict/getDictListByType', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {
        type: 'common_log_type',
      },
    }).then((res) => {
      const obj = {};
      const logstypevalue = res?.data;

      logstypevalue.map((e: any, i: number) => {
        obj[e.value] = {
          text: e.label,
        };
      });
      setlogstypevalueEnumEnum(obj);
    });
    //
  };
  useEffect(() => {
    gettypevalueEnumEnum();
    getlogstypevalueEnumEnum();
  }, []);
  useEffect(() => {
    actionRef.current?.reload();
  }, [activeKey, month]);
  useEffect(() => {
    setTimeout(() => {
      setActiveKey('tab1');
    }, 300);
  }, []);

  let ColumsObj = {
    tab1: [
      {
        title: '项目名称',
        dataIndex: 'projectName',
        key: 'projectName',
      },
      {
        title: '操作用户',
        dataIndex: 'userName',
        key: 'userName',
      },
      {
        title: '内容',
        dataIndex: 'functionName',
        key: 'functionName',
      },
      {
        title: 'URL',
        dataIndex: 'url',
        key: 'url',
      },
      {
        title: '操作类型',
        dataIndex: 'operationType',
        key: 'operationType',
        valueEnum: typevalueEnum,
        valueType: 'select',
        fieldProps: {
          showSearch: true,
        },
      },
      {
        title: '操作者IP',
        dataIndex: 'ipAddress',
        key: 'ipAddress',
        align: 'left',
      },
      {
        title: '操作时间',
        dataIndex: 'operationDate',
        key: 'operationDate',
        align: 'left',
      },
      {
        title: '日志类型',
        dataIndex: 'logType',
        key: 'logType',
        valueEnum: logstypevalueEnum,
        valueType: 'select',
        fieldProps: {
          showSearch: true,
        },
      },
    ],
    tab2: [
      {
        title: '项目名称',
        dataIndex: 'projectName',
        key: 'projectName',
      },
      {
        title: '操作用户',
        dataIndex: 'userName',
        key: 'userName',
      },
      {
        title: '内容',
        dataIndex: 'functionName',
        key: 'functionName',
      },
      {
        title: 'URL',
        dataIndex: 'url',
        key: 'url',
      },
      {
        title: '操作类型',
        dataIndex: 'operationType',
        key: 'operationType',
        valueEnum: typevalueEnum,
        valueType: 'select',
        fieldProps: {
          showSearch: true,
        },
      },
      {
        title: '操作者IP',
        dataIndex: 'ipAddress',
        key: 'ipAddress',
        align: 'left',
      },
      {
        title: '操作时间',
        dataIndex: 'operationDate',
        key: 'operationDate',
        align: 'left',
      },
      {
        title: '日志类型',
        dataIndex: 'logType',
        key: 'logType',
        valueEnum: logstypevalueEnum,
        valueType: 'select',
        fieldProps: {
          showSearch: true,
        },
      },
    ],
    tab3: [
      {
        title: '项目名称',
        dataIndex: 'projectName',
        key: 'projectName',
      },
      {
        title: '操作用户',
        dataIndex: 'userName',
        key: 'userName',
      },
      {
        title: '内容',
        dataIndex: 'functionName',
        key: 'functionName',
      },
      {
        title: 'URL',
        dataIndex: 'url',
        key: 'url',
      },
      {
        title: '操作类型',
        dataIndex: 'operationType',
        key: 'operationType',
        valueEnum: typevalueEnum,
        valueType: 'select',
        fieldProps: {
          showSearch: true,
        },
      },
      {
        title: '操作者IP',
        dataIndex: 'ipAddress',
        key: 'ipAddress',
        align: 'left',
      },
      {
        title: '操作时间',
        dataIndex: 'operationDate',
        key: 'operationDate',
        align: 'left',
      },
      {
        title: '日志类型',
        dataIndex: 'logType',
        key: 'logType',
        valueEnum: logstypevalueEnum,
        valueType: 'select',
        fieldProps: {
          showSearch: true,
        },
      },
    ],
  };

  let connetColums = [];
  return (
    <>
      <ProTable
        className="antTableTheadTh"
        actionRef={actionRef}
        columns={ColumsObj[activeKey]}
        params={form.getFieldsValue()}
        // params 是需要自带的参数
        // 这个参数优先级更高，会覆盖查询表单的参数
        request={async (
          // 第一个参数 params 查询表单和 params 参数的结合
          // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
          params: T & {
            pageSize: number;
            current: number;
          },
          sort,
          filter,
        ) => {
          // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
          // 如果需要转化参数可以在这里进行修改 
          let requestParams = {};

          switch (activeKey) {
            case 'tab1':
              //操作日志
              requestParams['type'] = "1";
              break;
            case 'tab2':
              //登录成功日志
              requestParams['type'] = "2";
              break;
            case 'tab3':
              //登录失败日志
              requestParams['type'] = "3";
              break;
            default:
              break;
          }
          const response: any = await request('/sys/commonLogger/findCommonLogByFilter', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            data: {
              ...params,
              ...{
                pageNo: params.current,
                pageSize: params.pageSize,
                type: requestParams.type,
              },
            },
          });
          const responsedata = response?.data?.data || [];

          return {
            data: responsedata,
            // success 请返回 true，
            // 不然 table 会停止解析数据，即使有数据
            success: true,
            total: response?.data?.totalCount,
            // 不传会使用 data 的长度，如果是分页一定要传
          };
        }}
        // title={() => {
        //   return (
        //     <div className="flexRow" style={{ textAlign: 'right' }}>
        //       <div>单位:万元</div>
        //     </div>
        //   );
        // }}
        id="bankFunds"
        // search={{
        //   filterType: 'light',
        // }}
        bordered
        toolbar={{
          filter: (
            <>
              {/* <DatePicker
                value={month ? moment(month) : moment()}
                onChange={(date, datestr) => {
                  setmonth(datestr);
                }}
              /> */}
            </>
          ),
          menu: {
            type: 'tab',
            activeKey: activeKey,
            items: [
              {
                key: 'tab1',
                label: <span>操作日志</span>,
              },
              {
                key: 'tab2',
                label: <span>登录成功日志</span>,
              },
              {
                key: 'tab3',
                label: <span>登录失败日志</span>,
              },
            ],
            onChange: (key) => {
              setdatasource([]);
              setActiveKey(key as string);
            },
          },
        }}
        search={{
          defaultCollapsed: false, // 设置检索区域默认展开  
        }}
        scroll={{ x: 1500, y: window.innerHeight - 300 }}
        options={false}
      />
    </>
  );
};
